<!--
	Home.vue是页面，有路由、连接状态数据、派发数据到子组件
-->
<template>
	<div class="home">
		
		<!-- 头部 -->
		<home-head 
            v-bind:city="city" 
            v-on:do-query="doQuery"
        />

		<!-- 广告轮播图 -->		
		<home-swiper v-bind:swiper-list="swiperList"></home-swiper>
		
		<!-- icons轮播区域 -->
        <home-icons v-bind:icon-list="iconList" />    
        
        <!-- 定位失败与必玩榜单 -->  
        <position-and-ranking />

        <!-- 热门推荐 -->
        <recommend v-bind:recommend-list="recommendList"/>

        <a class="mp-like-more" href="//touch.piao.qunar.com/touch/list_北京_景点门票.html">查看所有产品</a>
        
        <!-- 周末游 -->
        <weekend v-bind:weekend-list="weekendList" />

	</div>
</template>

<script type="text/javascript">
	import axios from 'axios'
	import HomeHead from './home/HomeHead'
	import HomeSwiper from './home/Swiper'
	import HomeIcons from './home/Icons'
	import PositionAndRanking from './home/PositionAndRanking'
	import Recommend from './home/Recommend'
	import Weekend from './home/Weekend'
    import { mapGetters } from 'vuex'	
    
	export default{
		name:"home",
		data(){
			return {
				msg:"home",
				lastCity: '',
		        swiperList: [],
		        iconList: [],
		        recommendList: [],
		        weekendList: []
			}
		},
		computed:{		
			...mapGetters(['env','city'])		
		},
		components:{
			HomeHead,
			HomeSwiper,
			HomeIcons,
			PositionAndRanking,
			Recommend,
			Weekend
		},
		mounted(){	
			this.lastCity=this.city;  
			this.getData();


		},
		methods:{			
			getData(){	        
                //模拟数据：无service处理        
                axios.post(this.env.server8092+"travelimg/gethome",{city:this.city}).then((response)=>{				
                    if(response.status===200){
						var map=response.data.data;
						this.swiperList=map.swiperList;
						this.iconList=map.iconList;
						this.recommendList=map.recommendList;	
						this.weekendList=map.weekendList;			
					}
                });
            },
            doQuery(arg){
				//直接传递函数到子组件，子组件执行方法是注入数据反向到父组件
                console.log("获取到子元素传递参数：'"+ arg +"',发送请求重新获取数据");
                this.lastCity=arg;
                if (this.lastCity !== this.city) {
                    this.lastCity = this.city
                    this.getData()
                }
            }
		},
		activated(){
			/*
			 *	用户有首页切换到list,在list也返回首页时，如果用户选择的当前城市发生变化比如由桂林点击了上海，
			 *		这里就要重新发送请求渲染首页数据，如果用户在list也点击桂林或者直接点击back按钮，
			 *		当回到首页时候会进入当前activated钩子，但并不需要重新渲染数据,因此在业务逻辑上线判断状态管理city
			 *		有没有变量来决定是否重新请求数据
			 */		
			if (this.lastCity !== this.city) {
	      		this.lastCity = this.city
	      		this.getData()
	    	}
		}
	}
</script>

<style lang="stylus" scoped>
	.mp-like-more
		display:block;padding:.2rem 0;color: #00afc7; font-size: .28rem; line-height: .4rem; text-align: center;	
</style>
